<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/ajax.js"></script>
</head>
<body onload="getLoginedUser()">
<main style="width: 70%; margin: auto">
    <header style="display: flex; justify-content: space-between; align-items: center">
        <h1>XXX系统</h1>
        <div id="myinfo">
            <a href="#">登录</a>
            <a href="#">注册</a>
        </div>
    </header>
    <form action="login.s" method="post">
        账号:<input id="username"><br>
        密码:<input id="password" type="password"><br>
        验证码:
            <img src="vcode.s" height="22px" onclick="src='vcode.s?'+new Date()">
            <input id="vcode" placeholder="请求输入验证码"><br>
        <button type="button" onclick="login()">登录</button>
    </form>
</main>
<script>
    function login(){
        axios.get("login.do",{
            params:{
                username : username.value,
                password : password.value,
                vcode : vcode.value
            }
        }, res=>{
            if(res.code==1){
                // 之前的 data 是字符串
                // 现在的 data 是map => {username:.., requestURI:..}
                if(res.data.requestURI){
                    location.href = res.data.requestURI
                } else {
                    myinfo.innerHTML = `欢迎 ${res.data.username} <a href="logout.s">退出</a>`;
                }
            } else {
                alert(res.msg);
            }
        })
    }

    // 打开页面时, 查询是都已经登录
    function getLoginedUser(){
        axios.get("myName.s", null, res=>{
            if(res.code==1){
                myinfo.innerHTML = `欢迎 ${res.data} <a href="logout.s">退出</a>`;
            }
        })

        if(location.search == '?code=1'){
            alert("请先登录系统");
        }

    }
</script>

</body>
</html>